<template>
  <!--废弃？-->
  <div class="CarsApplyReview">
    <div class="title">车辆流转审批<i></i></div>
    <div class="main">
      <div>
        <span class="input_left_title"><i class="red_start">*</i>车辆</span>
        <el-input v-model="licensePlate" placeholder="车辆" class="input_box" :disabled="true"></el-input>
      </div>
      <div class="carMessage">
        <div class='carMessageTitle'>车辆信息</div>
        <div>
          <span class="input_left_title">驾校</span>
          <el-input v-model="driverSchool" placeholder="永安驾校" class="input_box" :disabled="true"></el-input>
          <span class="input_left_title">项目部</span>
          <el-input v-model="oriProDepart" placeholder="项目部" class="input_box" :disabled="true"></el-input>
          <span class="input_left_title">训练场</span>
          <el-input v-model="trainingGround" placeholder="永安训练场" class="input_box" :disabled="true"></el-input>
          <span class="input_left_title">教练</span>
          <el-input v-model="coach" placeholder="岂可那" class="input_box" :disabled="true"></el-input>
        </div>
        <div class='carMessageTitle newtrainGRound'>选择新训练场</div>
        <span class="input_left_title "><i class="red_start">*</i>训练场</span>
        <el-input v-model="coach" placeholder="岂可那" class="input_box" :disabled="true"></el-input>
        <div class="adultsBtn">
          <span class="findingsAdult">审核结果:</span>
          <span v-for="(item,index) in adultResults" :key="index" :class="{activeBtn:isagreeApply==item.name}" @click="selectBtn(item.name)">{{item.name}}</span>
        </div>
        <div class="agreeApply" v-show="isagreeApply=='审核通过'">
          <div class="finalAdult">同意本车辆转场申请</div>
        </div>
        <div class="agreeApply" v-show="isagreeApply=='审核不通过'">
          <div class="finalAdult">申请转场审核不通过</div>
          <div class="caseMessage">
            <div>请填写退回原因:</div>
            <textarea name="" id="caseReturn"></textarea>
          </div>
        </div>
        <div class="btnPart">
          <i class="btn-style-main">提交</i>
          <i class="btn-style-eee" style="color: #000">取消</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import '../../assets/css/public.scss'

  export default {
    name: 'CarsApplyReview',
    components: {},
    data () {
      return {
        licensePlate: '粤56565', // 车牌
        driverSchool: '永安驾校', // 驾校
        oriProDepart: '项目部', // 项目部
        trainingGround: '永安训练场', // 训练场
        coach: '岂可那', // 教练
        isagreeApply: '审核通过',
        activeBtn: '',
        adultResults: [{
          class: 'adultsSucBtn',
          name: '审核通过'
        }, {
          class: 'adultsNotSucBtn',
          name: '审核不通过'
        }]
      }
    },
    methods: {
      selectBtn (name) {
        this.isagreeApply = name
      }
    }
  }
</script>

<style rel="stylesheet/scss" type="text/scss" lang="scss">
  .carsApplyReview {
    background: #fff;
    .title {
      color: #fff;
      font-size: 20px;
      height: 58px;
      line-height: 58px;
      text-align: center;
      background: #e14a21;
      position: relative;
      i {
        display: inline-block;
        width: 23px;
        height: 23px;
        background: url('../../assets/imgs/public/closeBtn.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 10px;
        top: 18px;
      }
    }
    .main {
      padding: 10px 30px;
      .carMessage {
        padding: 20px 0px 0px;
        .carMessageTitle {
          font-size: 16px;
          margin-bottom: 2px;
          font-weight: bold;
        }
        .newtrainGRound {
          margin-top: 20px;
        }
        .agreeApply {
          padding: 10px;
          border: 1px solid #e6e6e6;
          background-color: rgb(241, 241, 241);
          margin: 5px 0px;
          .finalAdult {
            margin: 8px 0px;
            padding-left: 4px;
            border-left: solid 4px #ff7979;
            font-weight: bold;
          }
          .caseMessage {
            div {
              padding: 8px 15px;
              background: #FBFBFB;
            }
            textarea {
              line-height: 20px;
              position: relative;
              min-height: 100px;
              border-radius: 0 0 10px 10px;
              width: 100%;
              border: 1px solid #e6e6e6;
              padding: 6px 10px;
            }
          }
        }
        .adultsBtn {
          margin-top: 20px;
          span {
            display: inline-block;
            width: 85px;
            height: 32px;
            text-align: center;
            border: 1px solid #eee;
            line-height: 32px;

          }
          span:nth-child(2) {
            margin: 0px 15px;
          }
          span:nth-child(n+2) {
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            cursor: pointer;
          }
          .activeBtn {
            background: rgb(47, 172, 240);
            color: #fff;
          }
          /*.adultsSucBtn{*/
          /*margin: 0px 15px;*/
          /*&:hover{*/
          /*!*color: #e14a21;*!*/
          /*background: rgb(47, 172, 240);*/
          /*color: #fff;*/
          /*}*/
          /*}*/
          /*.adultsNotSucBtn{*/
          /*&:hover{*/
          /*!*color: #e14a21;*!*/
          /*background: rgb(47, 172, 240);*/
          /*color: #fff;*/
          /*}*/
          /*}*/
        }
      }
    }
  }
</style>
